<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- cdn & iconfont -->
    <script src="./cdn/vue.min.js"></script>
    <link href="./cdn/tailwindcss.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./cdn/iconfont/iconfont.css">

    <title>黄敬鑫 | 网址导航</title>

    <!-- ico & css -->
    <link rel="shortcut icon" href="./image/favicon.png">
    <link rel="stylesheet" href="./static/main.css">
</head>

<body>

    <div id="app" class="flex flex-col sm:flex-row phone-w-screen phone-h-screen">
        <!-- 左边栏 -->
        <nav class="sm:min-h-screen w-full sm:w-12 lg:w-64">
            <div class="bg-wechat pin-t pin-l z-10 w-full sm:w-12 lg:w-64 md:block sm:min-h-screen text-white"
                :class="isFixed?'fixed':''">
                <div class="flex flex-row items-center justify-between sm:justify-center py-2 sm:py-4 px-8 sm:px-0">
                    <div class="h-12 w-12 lg:mr-4 hidden sm:block">
                        <img src="./image/logo.png" alt="logo">
                    </div>
                    <div class="md:hidden md:mr-4 lg:block lg:mr-0">
                        <h3 class="text-blue hidden text-blue-500 text-xl font-bold md:block">黄敬鑫导航</h3>
                        <p class="sm:mt-2 text-lg sm:text-sm block sm:hidden md:block">黄敬鑫携程为您服务
                        </p>
                    </div>
                    <div class="block sm:hidden">
                        <span class="iconfont icon-config mr-2" style="font-size:24px;"
                            @click="isFixed=!isFixed"></span>
                        <span class="iconfont icon-menu" style="font-size:24px;" @click="showMenu=!showMenu"></span>
                    </div>
                </div>


                <ul v-show="showMenu"
                    class="flex flex-row flex-wrap sm:flex-col list-reset mt-2 md:pl-0 md:pr-0 lg:pl-12 lg:pr-8">
                    <li v-for="(type,index) in sites"
                        class="w-1/4 sm:w-full text-gray-500 cursor-pointer hover:text-white">
                        <div class="flex flex-col items-center sm:flex-row sm:justify-center py-2 sm:border-b border-gray-700"
                            @click="jump(index)">
                            <span class="iconfont icon-big mr-0 lg:mr-2" :class="type.icon"></span>
                            <span class="text-sm mt-1 sm:mt-0 block sm:hidden lg:block">{{type.name}}</span>
                            <span class="iconfont icon-arrow-right ml-16 hidden lg:block"></span>
                        </div>
                    </li>
                </ul>


                <a v-show="showMenu" class="block flex flex-row justify-center mt-4 text-sm cursor-pointer text-white"
                    href="#about">
                    <span class="iconfont icon-about mr-4 sm:mr-0 lg:mr-2"></span>
                    <span class="block sm:hidden lg:block">关于本站</span>
                </a>
            </div>
        </nav>
        <div v-if="isFixed" style="height:43px;"></div>


        <!-- 右边栏 -->
        <div class="flex-1">



            <!-- 搜索栏 -->
            <div class="w-full h-16 hidden sm:block">

                <div class="w-full fixed top-0 left-0 sm:pl-12 lg:pl-64 h-16 border-b flex flex-row justify-center items-center"
                    style="background-color:rgba(255, 255, 255, 0.98);">

                    <!-- 搜索框 -->
                    <div class="flex flex-row justify-center items-center h-10 bg-white border rounded text-gray-700"
                        id="search-outer">
                        <div class="w-8 h-8 flex flex-row justify-center items-center"><span
                                class="iconfont icon-search cursor-pointer"></span></div>
                        <div class="bg-white" style="width:450px">
                            <input class="h-full w-full focus:outline-none" id="search-input" type="text"
                                placeholder="请输入关键词" v-model="input" @focus="focus = true"
                                @blur="setTimeout(x => focus = false, 100)" @keyup.enter="inputEnter()"
                                @keyup.esc="inputEsc()" @keyup.up="inputUp()" @keyup.down="inputDown()">
                        </div>

                        <!-- 搜索引导 搜索框后面那个问号 -->
                        <div class="w-8 h-8 flex flex-row justify-center items-center cursor-pointer" id="search-guide">
                            <span class="iconfont icon-question relative">

                                <div id="search-guide-absolute">

                                    <div id="search-guide-outer" class="border shadow rounded bg-white">
                                        <div class="w-full h-full p-4 cursor-text text-sm z-20" id="search-guide-show">
                                            <h2 class="font-bold text-base mb-1">善用搜索，事半功倍</h2>

                                            <h3 class="mt-4 mb-4 font-bold" style="font-size: 15px">关键词</h3>
                                            <p>搜索索引由 <span class="text-red-500">域名、名字、描述和一些常用词汇</span> 组成。</p>
                                            <p class="mt-2">比如「英雄联盟」的关键词：</p>
                                            <p class="mt-2 text-red-500"> 英雄联盟、lol、游戏、老兵</p>

                                            <h3 class="mt-8 mb-2 font-bold" style="font-size: .935rem">快捷键</h3>
                                            <p> <span class="inline-block w-16">Enter：</span>进入搜索结果</p>
                                            <p> <span class="inline-block w-16">Esc：</span>清除输入内容和搜索结果</p>
                                            <p> <span class="inline-block w-16">Up：</span>选择搜索结果</p>
                                            <p> <span class="inline-block w-16">Down：</span>选择搜索结果</p>

                                            <p class="text-gray-500 mt-4 text-center">不要问为什么，就是这么任性</p>
                                        </div>
                                    </div>
                                </div>
                            </span>

                        </div>
                    </div>


                    <!-- 搜索结果 -->
                    <div class="relative bg-teal-500" v-show="results.length&&focus">
                        <div class="absolute shadow-xl border rounded" id="search-result-absolute">
                            <div class="overflow-y-scroll h-full pr-4 mr-1 z-30" id="search-result-box">
                                <div id="search-result-box-top" class="h-0 w-full"></div>
                                <div v-for="(result,index) in results">

                                    <div style="min-width:80px" @mouseover="id=index" @click="open(result.url)"
                                        :class="index===id?'text-blue-600 border-blue-500':''" :id="`result-${index}`"
                                        class="flex flex-row items-center my-4 p-4 h-full w-full border bg-white rounded cursor-pointer hover:text-blue-600 hover:border-blue-500">
                                        <div class="h-12 w-12 sm:mr-4" style="min-height:48px;min-width:48px;">
                                            <img :src="'./image/site/'+result.logo" :alt="result.logo"
                                                class="w-full h-full rounded">
                                        </div>

                                        <div class="flex flex-col overflow-hidden">
                                            <span
                                                class="font-bold text-sm whitespace-no-wrap sm:truncate text-center mt-2 sm:text-left">{{result.name}}</span>
                                            <span
                                                class="h-10 text-gray-700 text-sm mt-1 w-full hidden sm:block sm:double-line">{{result.description}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>





            <!-- 主体 -->
            <div class="sm:p-8 phone-overflow-y-scroll" style="background-color:#f7f7f7">
                <div v-for="(type,index) in sites">
                    <div class="pb-4 pt-6 pl-2 sm:ml-0" :id="index">
                        <span class="iconfont icon-tag"></span>
                        <span class="">{{type.name}}</span>
                    </div>

                    <div class="flex flex-row items-center flex-wrap">
                        <div v-for="(list,index) in type.lists" :key="index"
                            class="flex flex-row items-center w-1/3 sm:w-1/2 xl:w-1/4 sm:h-24 px-2 mt-4 overflow-hidden">

                            <div @click="open(list.url)" style="min-width:80px"
                                class="flex flex-col sm:flex-row items-center px-1 py-2 sm:p-4 h-full w-full border bg-white rounded cursor-pointer hover:text-blue-600 hover:border-blue-500">
                                <div class="h-12 w-12 sm:mr-4" style="min-height:48px;min-width:48px;">
                                    <img :src="'./image/site/'+list.logo" :alt="list.logo"
                                        class="w-full h-full rounded">
                                </div>

                                <div class="flex flex-col w-full overflow-hidden">
                                    <span
                                        class="font-bold text-sm whitespace-no-wrap sm:truncate text-center mt-2 sm:text-left">{{list.name}}</span>
                                    <span
                                        class="h-10 text-gray-700 text-sm mt-1 w-full hidden sm:block sm:double-line">{{list.description}}</span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>






                <!-- 关于本站 -->
                <div class="mt-8 bg-white p-6 pt-4 text-gray-700" id="about">
                    <div class="py-4 mt-2">
                        <span class="iconfont icon-tag"></span>
                        <span class="">关于站长</span>
                    </div>
                    <div>
                        <blockquote>
                            <p>前端业余爱好者，欢迎加好友学习交流。</p>
                        </blockquote>
                    </div>
                    <div></div>
                </div>






                <!-- 社交软件 -->
                <div class="flex flex-row justify-center mt-8">
                    <ul class="flex flex-row justify-center flex-wrap list-reset w-full">
                        <li v-for="(app,index) in apps" :key="index" class="w-8 h-8 mx-1 mt-2">
                            <a :href="app.url" target="_blank" class="block h-full w-full">
                                <img :src="`./image/app/${app.logo}.png`" :alt="app.logo" :title="app.name"
                                    class="rounded">
                            </a>
                        </li>
                    </ul>
                </div>






                <!-- 备案信息 -->
                <div class="flex flex-col md:flex-row justify-center items-center mt-12">
                    <p class="text-sm mx-4" style="color:#939393;">Copyright © 2020 黄敬鑫</p>
                    <p class="text-sm mx-4" style="color:#939393;">粤ICP备19080640号-1</p>
                    <a target="_blank" class="block flex flex-row items-center mx-4"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030902001621">
                        <img src="image/foot/beian.png" class="mr-1" />
                        <span style="color:#939393;">粤公网安备 44030902001621号</span>
                    </a>
                </div>





            </div>

        </div>

    </div>



    <script src="./static/main.js"></script>

</body>

</html>
